import { Fragment } from '@/components/Fragment'; 
import { Flex, ToggleButton } from '@aws-amplify/ui-react';

import { Example, ExampleCode } from '@/components/Example';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import ThemeExample from '@/components/ThemeExample.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import { ToggleButtonDemo } from './demo';
import {
  ControlledToggleButtonExample,
  DefaultToggleButtonExample,
  DefaultToggleButtonGroupExample,
  DisabledToggleButtonExample,
  ExclusiveToggleButtonGroupExample,
  SelectionRequiredToggleButtonGroupExample,
  ToggleButtonSizeExample,
  ToggleButtonStylePropsExample,
  ToggleButtonVariationsExample,
  ToggleButtonThemeExample,
} from './examples';

## Demo

<ToggleButtonDemo />

## Usage

Import the ToggleButton primitive.

<Example>
  <DefaultToggleButtonExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultToggleButtonExample.tsx

    ```

  </ExampleCode>
</Example>

### Controlled component

A toggle button can be a controlled component when given `isPressed` prop and `onChange` prop must be provided in this case.

<Example>
  <ControlledToggleButtonExample />
  <ExampleCode>
    ```jsx file=./examples/ControlledToggleButtonExample.tsx

    ```

  </ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the Button size. Available options are `small`, `large`, and none (default).

<Example>
  <ToggleButtonSizeExample />
  <ExampleCode>
    ```jsx file=./examples/ToggleButtonSizeExample.tsx

    ```

  </ExampleCode>
</Example>

### Variations

Use the `variation` prop to change the Button variation. Available options are `primary`, `link`, and none (default).

<Example>
  <ToggleButtonVariationsExample />

  <ExampleCode>
    ```jsx file=./examples/ToggleButtonVariationsExample.tsx
    ```
  </ExampleCode>
</Example>

### Disabled

A disabled toggle button will not be able to switch state and will not be focusable.

<Example>
  <DisabledToggleButtonExample />
  <ExampleCode>
    ```jsx file=./examples/DisabledToggleButtonExample.tsx

    ```

  </ExampleCode>
</Example>

### ToggleButtonGroup

You can group related Toggle buttons easily with a `ToggleButtonGroup` out of box. To control the selected state of its child buttons, both `value` and `onChange` props must be provided.

<Example>
  <DefaultToggleButtonGroupExample />
  <ExampleCode>
    ```jsx file=./examples/DefaultToggleButtonGroupExample.tsx

    ```

  </ExampleCode>
</Example>

To make your toggle button group exclusive, set the `isExclusive` prop to `true`.

<Example>
  <ExclusiveToggleButtonGroupExample />
  <ExampleCode>
    ```jsx file=./examples/ExclusiveToggleButtonGroupExample.tsx

    ```

  </ExampleCode>
</Example>

In cases where you need to have at least one option on, you can set the `isSelectionRequired` prop to `true`.

<Example>
  <SelectionRequiredToggleButtonGroupExample />
  <ExampleCode>
    ```jsx file=./examples/SelectionRequiredToggleButtonGroupExample.tsx

    ```

  </ExampleCode>
</Example>

<StandardHTMLAttributes component="ToggleButton" link="button" element="<button>">
  <Example>
    <ToggleButton name="button">Press me!</ToggleButton>

    <ExampleCode>

    ```jsx
    <ToggleButton name="button">Press me!</ToggleButton>
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## CSS Styling

<ThemeExample component="ToggleButton">
  <Example>
    <ToggleButtonThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/ToggleButtonThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="ToggleButton" />

### Global styling

To override styling on all ToggleButtons, you can set the Amplify CSS variables or use the built-in `.amplify-togglebutton` class.

<Example>
  <ToggleButton className="my-togglebutton-global">{'Press me!'}</ToggleButton>
  <ExampleCode>
    ```css
    :root {
      --amplify-components-togglebutton-color: var(--amplify-colors-purple-60);
    }

    .amplify-togglebutton {
      color: var(--amplify-colors-purple-60);
    }
    ```

  </ExampleCode>

  <ExampleCode>
    ```jsx
    <ToggleButton className="my-togglebutton-global">Press me!</ToggleButton>
    ```

  </ExampleCode>
</Example>

### Local styling

To override styling on a specific ToggleButton, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <ToggleButton className="my-togglebutton">Press me!</ToggleButton>
  <ExampleCode>
    ```css
    .my-togglebutton {
      border-radius: 20px;
    }
    ```

  </ExampleCode>

  <ExampleCode>
    ```jsx
    <ToggleButton className="my-togglebutton">Press me!</ToggleButton>
    ```

  </ExampleCode>
</Example>

_Using data attributes:_

<Example>
  <ToggleButton className="my-togglebutton-data-attribute" variation="primary">
    {'Press me!'}
  </ToggleButton>
  <ExampleCode>
    ```css
    .amplify-togglebutton[data-variation='primary'] {
      color: var(--amplify-colors-blue-60);
    }
    ```

  </ExampleCode>

  <ExampleCode>
    ```jsx
    <ToggleButton className="my-togglebutton-data-attribute" variation="primary">
      'Press me!'
    </ToggleButton>
    ```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <ToggleButtonStylePropsExample />
  <ExampleCode>
    ```jsx file=./examples/ToggleButtonStylePropsExample.tsx

    ```

  </ExampleCode>
</Example>